<template>
    <el-card>
        <!-- sku表格 -->
        <el-table :data="skuList" border stripe empty-text="暂无数据" max-height="1100">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
            <el-table-column prop="skuDesc" label="描述" width="width"></el-table-column>
            <el-table-column prop="prop" label="默认图片" width="150" align="center">
                <template slot-scope="{row,$index}">
                    <img v-if="row.skuDefaultImg" :src="row.skuDefaultImg" style="height: 100px;width: 100px;">
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量(KG)" width="200" align="center"></el-table-column>
            <el-table-column prop="prop" label="价格(元)" width="200" align="center">
                <template slot-scope="{row,$index}">
                    <div v-if="row.price">
                        <span style="color: rgb(255, 96, 96) ;">￥</span>
                        <span style="font-size: 20px;font-weight: bolder; color: rgb(255, 96, 96);">{{row.price}}</span>
                        <span style="font-weight: bold; color:  rgb(255, 96, 96);">.00</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="300" align="center">
                <template slot-scope="{row,$index}">
                    <el-tooltip v-if="row.isSale === 1" content="上架SKU" placement="bottom" :open-delay="600">
                        <el-button type="success" icon="el-icon-top" size="small" @click="skuOnSale(row)">
                        </el-button>
                    </el-tooltip>
                    <el-tooltip v-else content="下架SKU" placement="bottom" :open-delay="600">
                        <el-button type="warning" icon="el-icon-bottom" size="small" @click="skuCancelSale(row)">
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="编辑SKU" placement="bottom" :open-delay="600">
                        <el-button type="primary" icon="el-icon-edit" size="small" @click="skuEdit">
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="查看详情" placement="bottom" :open-delay="600">
                        <el-button type="info" icon="el-icon-info" size="small" @click="lookSkuInfo(row)">
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="删除SKU" placement="bottom" :open-delay="600">
                        <el-popconfirm :title="`确定删除${row.skuName}吗？`" @onConfirm="deleteSku(row)">
                            <el-button style="margin-left: 10px;" slot="reference" type="danger" icon="el-icon-delete"
                                size="small"></el-button>
                        </el-popconfirm>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- 
                    current-page: 当前是第几页
                    total: 一共有多少条数据需要展示
                    page-size: 每一页需要展示多少条数据
                    page-sizes: 设置每一页展示多少条数据
                    pager-count: 连续的页码数
                    layout: 设置分页器的布局| -> : 代表将箭头后的元素移动至页面最右端
                -->
        <el-pagination background style="margin-top: 30px; text-align: center;" :current-page="page" :total="total"
            :page-size="limit" :page-sizes="[6,9,12]" :pager-count="7" layout="prev,pager,next,jumper,->,sizes,total"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" @prev-click="handlePrevClick"
            @next-click="handleNextClick">
        </el-pagination>

        <!-- 侧边弹出框 -->
        <el-drawer title="我是标题" :visible.sync="isShowdrawer" :with-header="false" @close="closeDrawer">
            <div class="drawer-container">
                <el-row class="drawer-row">
                    <el-col :span="6">
                        <div class="title">名称</div>
                    </el-col>
                    <el-col :span="16">
                        <div class="text" v-if="skuInfo.skuName">{{skuInfo.skuName}}</div>
                        <div class="text" v-else style="color: #999;font-size: 18px;">暂无数据</div>
                    </el-col>
                </el-row>
                <el-row class="drawer-row">
                    <el-col :span="6">
                        <div class="title">描述</div>
                    </el-col>
                    <el-col :span="16">
                        <div class="text" v-if="skuInfo.skuDesc">{{skuInfo.skuDesc}}</div>
                        <div class="text" v-else style="color: #999;font-size: 18px;">暂无数据</div>
                    </el-col>
                </el-row>
                <el-row class="drawer-row">
                    <el-col :span="6">
                        <div class="title">价格</div>
                    </el-col>
                    <el-col :span="16">
                        <div class="text"
                            style="font-size: 24px;font-weight: 600; color: rgb(255, 109, 109);margin-top: 7px;"
                            v-if="skuInfo.price">
                            {{skuInfo.price}}.00</div>
                        <div class="text" v-else style="color: #999;font-size: 18px;">暂无数据</div>
                    </el-col>
                </el-row>
                <el-row class="drawer-row">
                    <el-col :span="6">
                        <div class="title">平台属性</div>
                    </el-col>
                    <el-col :span="16">
                        <div class="tag">
                            <el-tag v-for="(tag,index) in skuInfo.skuAttrValueList" :key="tag.id"
                                style="margin-right: 20px;margin-bottom: 10px;">{{tag.attrName}}</el-tag>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="drawer-row">
                    <el-col :span="6">
                        <div class="title">商品图片</div>
                    </el-col>
                    <el-col :span="16">
                        <div style="margin: 20px 0px 0px 26px;">
                            <el-carousel height="400px">
                                <el-carousel-item v-for="imgItem in skuInfo.skuImageList" :key="imgItem.id">
                                    <img :src="imgItem.imgUrl" style="height: 100%;width: 100%;">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </el-card>
</template>
<script>
    export default {
        name: "Sku",
        mounted() {
            this.getSkuList() // 页面加载时获取分页数据
        },
        data() {
            return {
                page: 1,  // 当前页码
                limit: 6, // 一页展示多少条数据
                total: 0, // 一共有多少条数据
                skuList: [], // sku分页数据
                isShowdrawer: false, // 是否显示抽屉
                skuInfo: {}, // sku详情
            }
        },
        methods: {
            // 获取sku分页数据
            async getSkuList() {
                const { page, limit } = this
                const result = await this.$api.sku.reqGetSkuList(page, limit)
                if (result.code == 200) {
                    this.total = result.data.total
                    this.skuList = result.data.records
                }
            },
            //#region 分页相关方法

            // 点击不同页码时
            handleCurrentChange(page) {
                this.page = page
                this.getSkuList()
            },
            // 页面展示数据条数变化时
            handleSizeChange(limit) {
                this.limit = limit
                this.getSkuList()
            },
            // 点击上一页
            handlePrevClick(page) {
                this.page = page
                this.getSkuList()
            },
            // 点击下一页
            handleNextClick(page) {
                this.page = page
                this.getSkuList()
            },
            //#endregion

            // sku上架
            async skuOnSale(row) {
                const result = await this.$api.sku.reqSkuOnSale(row.id)
                if (result.code == 200) {
                    row.isSale = 0 // 将上架按钮隐藏
                    this.$message({
                        type: 'success',
                        message: '上架成功！'
                    })
                }
            },
            // sku下架
            async skuCancelSale(row) {
                const result = await this.$api.sku.reqSkuCancelSale(row.id)
                if (result.code == 200) {
                    row.isSale = 1 // 将下架按钮隐藏
                    this.$message({
                        type: 'success',
                        message: '下架成功！'
                    })
                }
            },
            // sku编辑 | 功能开发中弹框提示
            skuEdit() {
                this.$message('功能正在开发中...')
            },
            // 查看sku详情
            async lookSkuInfo(row) {
                this.isShowdrawer = true // 显示抽屉
                const result = await this.$api.sku.reqGetSkuInfo(row.id)
                if (result.code == 200) {
                    this.skuInfo = result.data
                }
            },
            // 关闭sku详情
            closeDrawer() {
                this.skuInfo = {} // 关闭抽屉时清空数据
            },
            // 删除sku
            async deleteSku(row) {
                const result = await this.$api.sku.reqDeleteSku(row.id)
                if (result.code == 200) {
                    this.$message({ type: 'success', message: '删除成功！' })
                    this.getSkuList()
                }
            }
        },
    }
</script>
<style scoped>
    .drawer-container {
        width: 100%;
        height: 100px;
        padding: 100px 40px 0px 0px;
    }

    .drawer-row {
        margin-bottom: 40px;
    }

    .title {
        font-size: 24px;
        font-weight: 1000;
        color: #666;
        line-height: 50px;
        /* background-color: antiquewhite; */
        text-align: right;
    }

    .text {
        display: inline-block;
        font-size: 20px;
        color: #333;
        padding: 6px;
        border-radius: 5px;
        margin-left: 20px;
        margin-top: 10px;
    }

    .tag {
        padding: 6px;
        margin-left: 20px;
        margin-top: 4px;
    }
</style>